<template>
  <div class="project">
    <div class="all_project">
      <div class="all_list" v-if="!isNoData">
        <div class="project_list" v-for="(item,index) in templateList" :key="index">
          <div class="project_type">
            <div class="type_title">{{item.template_Type}}</div>
            <div class="type_content">
                <div class="list" v-for="(ite,inx) in item.template_List" :key="inx" @click="createProject(ite)">
                  <img :src="JSON.parse(ite.template_cover)[0].url" alt="">
                  <div class="name">{{ite.template_name}}</div>
                </div>
            </div>
          </div>
        </div>
      </div>
      <div v-else style="text-align: center;margin-top: 15%;">
        <img src="@/assets/images/card.png" alt="" style="width:100px;">
        <div>还没有模板,赶紧创建一个模板吧！</div>
      </div>
    </div>
    <div class="create_btn" @click="createTemplate">创建项目模板</div>
    <!-- 项目模板弹窗 -->
    <template>
      <el-dialog 
			  title="项目模板" 
				class="projectDialog"
				:append-to-body="true"
				:visible.sync="projectVisible" 
				v-if="projectVisible"
				:close-on-click-modal="false"
				top="5%"
				width="35%">
				<div class="template_content">
          <div class="template">
            <div class="template_title">模板封面</div>
            <div class="template_img">
              <img :src="filelist[0].url" v-if="filelist.length > 0">		
              <img :src="obpmFilePath + '/uploads/resource/image/project_template.png'" alt="" v-else>
              <el-upload
                action=""
                ref="uploadDom"
                :show-file-list='false'
                class="replace"
                name="files"
                :http-request='uploadImg'
                :on-preview="handlePreview"
                :on-remove="handleRemove"
                :before-remove="beforeRemove"
                :before-upload="beforeUpload"
                :on-exceed="handleExceed"
                :file-list="filelist">
                <span>更换封面</span>
              </el-upload>
            </div>
          </div>
          <div class="template">
            <div class="template_title"><span class="red">*</span>模板名称</div>
            <el-input size="small " placeholder="请输入模板名称" v-model="template_name" class="name"></el-input>
          </div>
          <div class="template">
            <div class="template_title"><span class="red">*</span>模板所属项目类别</div>
              <el-select 
                placeholder="请选择"
                v-model="template_type" 
                size="small"
                class="type_select"
                >
                <el-option
                  v-for="(item,index) in allProjectType"
                  :key="index"
                  :label="item.option"
                  :value="item.value"
                  >
                </el-option>
              </el-select>
          </div>
          <div class="template">
            <div class="template_title">模板描述</div>
            <el-input
              class="description"
              type="textarea"
              :autosize="{ minRows: 2, maxRows: 4}"
              placeholder="请输入内容"
              v-model="template_description">
            </el-input>
          </div>
				</div>
				<span slot="footer" class="dialog-footer">
					<el-button  size="small" @click="cancel">取消</el-button>
					<el-button type="primary"  size="small" @click="doConfirm">确认</el-button>
      	</span>
			</el-dialog>
    </template>
  </div>
</template>

<script>
import {
  getProjectTemplateList,
  createProjectTemplate,
  projectTemplateType,
  uploadFile,
} from "@/api.js"
export default {
  props:[
  ],
  // inject: [
  //   'addTab',
  // ],
  data() {
    return {
      appName:'',
      templateList:[],//项目数据
      projectVisible:false,//项目模板弹窗
      allProjectType:[],//所有模板类型
      template_type:'',//模板类型
      template_name:'', //模板名称
      template_description:'', //模板描述
      filelist:[],
      obpmFilePath:'', //'obpm'
      isNoData:false,
      openParams:{}
    };
  },
  created() {
    debugger
    let queryData = this.$route.query
    this.openParams = {
      magicAppName:queryData.magicAppName,
      appId:queryData.appId,
      linkType:queryData.linkType,
      userId:queryData.userId ? queryData.userId : '',
      id: Date.now(),
    }
    this.appName = this.openParams.magicAppName
    this.obpmFilePath = obpmConfig.obpmFilePath
    this.toGetProjectTemplateList()
  },
  methods: {
    cancel() {
      this.projectVisible = false
    },
    doConfirm() {
      if(this.filelist.length == 0) {
        this.filelist = [{
          name:'project_template',
          path:'/uploads/resource/image/project_template.png',
          scaleNum:1,
          status:'success',
          uid:'',
          url:this.obpmFilePath + '/uploads/resource/image/project_template.png',
          zoom:''
        }]
      }
      if(!this.template_name) {
        this.$notify({
          title: '请先输入名称！',
          message: '',
          type: 'warning'
        });
      }else if(!this.template_type) {
        this.$notify({
          title: '请先选择模板类型！',
          message: '',
          type: 'warning'
        });
      }else {
        this.createProject()
      }
    },
    toGetProjectTemplateList() {
      let userId = this.openParams.userId ? this.openParams.userId : ''
      getProjectTemplateList(
        this.appName,
        userId,
        {
          onSucess: response => {
            if(response.data.datas) {
              this.templateList = response.data.datas
              if(this.templateList.length == 0) {
                this.isNoData = true
              } 
            }else {
              if(response.data.errcode) {
                this.$notify({
                  title: response.data.errmsg,
                  message: '',
                  type: 'warning'
                });
              }
            }
          }
        }
      ) 
    },
    createTemplate() {
      debugger
      this.projectVisible = true
      this.filelist = []
      this.template_type = '',//模板类型
      this.template_name = '', //模板名称
      this.template_description = '', //模板描述
      this.toGetType()
    },
    toGetType() {
      projectTemplateType(
        this.appName,
        {
          onSucess: response => {
            if(response.data.datas) {
              this.allProjectType = response.data.datas
            }
          }
        }
      )
    },
    createProject(item) {
      let openParams = this.openParams
      if(item) {
        let actionContent = obpmConfig.magicHtmlPath + '/' + openParams.magicAppName + '/dist/index.html#/card?appId='+
        openParams.appId + "&linkType=" + openParams.linkType + "&magicAppName="+ openParams.magicAppName + "&name=" 
        + item.template_name + "&project_template_id=" + item.template_id + "&active=true"
        //打开项目
        let params = {
          linkType: openParams.linkType,
          appId: openParams.appId,
          active: true,
          actionContent:actionContent,
          name: item.template_name,
          refreshId: openParams.id,
          id:item.template_id,
          title:'',
          _select: '',
          project_template_id:item.template_id,
          magicAppName:openParams.magicAppName,
        }
        console.log('打开addTab')
        // this.addTab(params)
        top.obpmOAction('addTab',params)
      }else {
        //创建项目
        let template_cover = []
        template_cover.push(this.filelist[0])
        let data = {
          template_cover:template_cover,
          template_name:this.template_name,
          template_type:this.template_type,
          template_description:this.template_description,
          template_id:'',
        }
        createProjectTemplate(
          this.appName,
          data,
          {
            onSucess: response => {
              if(response.data.errcode == 200) {
                this.$notify({
                  title: '创建项目成功！',
                  message: '',
                  type: 'success'
                });
                this.toGetProjectTemplateList()
                this.projectVisible = false
                // let actionContent = obpmConfig.magicHtmlPath + '/' + openParams.magicAppName + '/dist/index.html#/card?appId='+
                //   openParams.appId + "&linkType=" + openParams.linkType + "&magicAppName="+ openParams.magicAppName + "&name=" 
                //   + this.template_name + "&project_template_id=" + response.data.project_template_id + "&active=true"
                // let params = {
                //   linkType: openParams.linkType,
                //   appId: openParams.appId,
                //   active: true,
                //   actionContent:actionContent,
                //   name: this.template_name,
                //   refreshId: openParams.id,
                //   title:'',
                //   _select: '',
                //   id:response.data.project_template_id,
                //   project_template_id:response.data.project_template_id,
                //   magicAppName:openParams.magicAppName,
                // }
                // top.obpmOAction('addTab',params)
              }
            }
          }
        ) 
      }
    },
		uploadImg(e){
      debugger
			let fileArray = e.file;
			let file = fileArray;
			let that = this;
			let form = new FormData();
			form.append("files", file);
			let files = form;
			let actionType = 'image/png';
			let appId = '__hDwZZTLdvTMp871Uf3J';
			let allowedTypes = null;
			let fieldId = '';
			let fileSaveMode = '00';
			let path = 'ITEM_PATH';
			let sourceFileId = "";
			let docId = '';
			uploadFile(
				files, 
				appId, 
				allowedTypes,  
				fieldId, 
				fileSaveMode, 
				path, 
				actionType,
				sourceFileId,
				docId,
				{
					onSucess: response => {
            // this.filelist = response.data.data
            this.filelist = [{
              name:response.data.data[0].fileName,
              path:response.data.data[0].filePath,
              scaleNum:1,
              status:response.data.data[0].status,
              uid:'',
              url:this.obpmFilePath + response.data.data[0].filePath,
              zoom:''
            }]
					}
				},
				(res) =>{
				},
        ''
			)
    },
    handlePreview() {

    },
    handleRemove() {

    },
    beforeRemove() {

    },
    beforeUpload() {

    },
    handleExceed() {

    },
  },
};
</script>
<style lang="scss">
@import "@/assets/style/project.scss";

</style>